<template>
  <div id="app">
    <el-container>
      <el-aside width="100px">
        <el-menu
            default-active="1"
            :default-openeds="['1']"
            background-color="#545c64"
            text-color="#fff"
            active-text-color="#ffd04b"
            @select="handleSelect">

          <template slot="title"><i class="el-icon-menu"></i>菜品种类</template>
          <el-menu-item index="默认类">全部</el-menu-item>
          <el-menu-item index="主食">主食</el-menu-item>
          <el-menu-item index="小吃">小吃</el-menu-item>
          <el-menu-item index="饮料">饮料</el-menu-item>
          <el-menu-item index="甜品">甜品</el-menu-item>
          <el-menu-item index="热菜">热菜</el-menu-item>
          <el-menu-item index="凉菜">凉菜</el-menu-item>
          <el-menu-item index="汤类">汤类</el-menu-item>
          <el-menu-item index="烧烤">烧烤</el-menu-item>
        </el-menu>
      </el-aside>

      <el-container>
        <el-main>
          <el-row>
            <el-col
                v-for="dish in dishes"
                :key="dish.productId"
                :span="6"
                style="padding: 10px">
              <el-card class="box-card">
                <div slot="header" class="clearfix">
                  <el-button class="productDetail" effect="dark" type="primary" plain disabled>
                    {{ dish.productName }} ({{ dish.productPrice }}元/份)
                  </el-button>
                       <el-button style="float: right; " type="primary"
                        @click="addToCart(dish)"
                    >加入购物车
                    </el-button>
                  </div>
<div class="text item" style="height: 100px">
                  <el-image style="" :src="dish.productUrl"/>
                </div>
              </el-card>
              <el-dialog title="添加购物车" :visible.sync="dialogFormVisible">
                <el-form :model="addToCartForm">
                  <el-form-item label="菜品数量" :label-width="formLabelWidth">
                    <el-input-number v-model="addToCartForm.quality" :min="1" :max="10"></el-input-number>
                  </el-form-item>
                  <el-form-item label="偏好描述" :label-width="formLabelWidth">
                    <el-input v-model="addToCartForm.remark" placeholder="请输入偏好描述(可选)">
                    </el-input>
                  </el-form-item>
                </el-form>
                <div slot="footer" class="dialog-footer">
                  <el-button @click="cancelAddToCart">取 消</el-button>
                  <el-button type="primary" @click="confirmAddToCart">确 定</el-button>
                </div>
              </el-dialog>
            </el-col>
          </el-row>
        </el-main>
        <el-footer style="height: 100px">
          <el-row>
          </el-row>
        </el-footer>
      </el-container>
    </el-container>


  </div>
</template>

<script>
import axios from "axios";
import {setProductCart} from "@/API/UserAPI";
import message from "@/utils/message";
import Message from "@/utils/message";
import {getProductList, selectProductPyType} from "@/API/ProductAPI";

export default {
  name: "Menu",
  data() {
    return {
      dialogFormVisible: false,
      dishes: [],
      userId: "",
      category: "全部",
      addToCartForm: {
        productId: '',
        quality: '',
        remark: '',
      },
      formLabelWidth: '120px',
    };
  },
  mounted() {
    this.getDishes();
    var getLocalData = localStorage.getItem("userInfo");
    this.userId = getLocalData.userId;
  },
  methods: {
    async getDishes() {
      axios.defaults.headers.common['token']=localStorage.getItem("token");
      try{
        let result =await getProductList(1,100);//调用后端接口，获取产品列表
          this.dishes = result.data;
        Message.success(this, "菜品信息加载成功。");
      }catch (error) {
        Message.error(this, "菜品信息加载失败。");
        throw error;
      }
    },
    async getDishesByType(productType) {

      try{
        if(productType==="默认类") {
          let result =await getProductList(1,100);//调用后端接口，获取产品列表
          this.dishes = result.data;
          }
          else {
          let result = await selectProductPyType(productType);//调用后端接口，获取产品列表
          this.dishes = result.data;
        }
        Message.success(this, "菜品信息加载成功。");
      }catch (error)  {
            Message.error(this, "菜品信息加载失败。");
        throw error;
          }
    },
    handleSelect(key, keyPath) {
      console.log(key);
      this.getDishesByType(key);
    },

    addToCart(dish) {
      this.dialogFormVisible = true;
      this.addToCartForm.productId = dish.productId;
    },
    async confirmAddToCart(){
      const result = await setProductCart({
        productId: this.addToCartForm.productId,
        quantity: 1,
        remark: "",
        userId: this.userId,
      })
      if(result.code === 1){
        message.success(this,"添加购物车成功！");
        this.dialogFormVisible = false;
      }else{
        message.error(this,result.description);
      }
    },
    cancelAddToCart(){
      this.dialogFormVisible = false;
    }
  },
};
</script>

<style>
.productDetail {
  float: left;
  width: 138px;
  height: 40px;
  font-size: 14px;
  text-align: center;

}

.text {
  font-size: 14px;
}

.item {
  margin-bottom: 18px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}

.box-card {
  width: 300px;
  height: 350px;
}

</style>
